<template>
    <div id="people">
        <div class="people__title"> 已成功邀请的好友</div>
        <div class="listbox">
            <ul v-if="islist" class="list__people">
                <li v-for="people in peoples" :key="people.type">
                    <img v-if="people.figure" :src="people.figure"/>
                    <img v-else src="../images/avatar.png"/>
                    <p>{{people.nick}}</p>
                </li>
            </ul>
            <div v-else class="list__hint">您暂时没有成功邀请的好友，请再接再厉！</div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import utils from '../../scripts/utils'
    export default {
        data(){
            return{
                islist:false,
                peoples:[]
            }
        },
        created(){
           //初始化数据
           this.getInvitePeople();
        },
        methods: {
            getInvitePeople:function(){
                axios.post('/api/mobile/invitePeople')
                .then((res) => {
                    if(res.data.length == 0) this.islist = false;
                    else this.peoples = res.data.invitepeople;
                })
                .catch(function (error){
                    console.log(error);
                });
            }
        }
    }
</script>
<style scoped>
    #people{
        height:100%;
        overflow: hidden;
        color:#fff;
        background: url('../images/bg.png') no-repeat;
        background-size: 100% 100%;
    }
    .people__title{
        font-size: 0.5rem;
        text-align: center;
        line-height: 1rem;
        box-shadow: 0 -5px 20px #00487b inset;
    }
    .listbox{
        height:85%;
        padding: 10px 10px 0;
    }
    .list__hint{
        font-size: 0.35rem;
        padding-top: 0.4rem;
    }
    .list__people li{
        font-size:.3rem;
        width: 30%;
        float:left;
        overflow: hidden;
        height: 20%;
        margin:.5rem 2.5% 0;
        text-align:center;
    }
    .list__people li:nth-child(3n+2){
        margin:.5rem 0 0 0;
    }
    .list__people li img{
        max-height:47px;
    }
    .list__people li p{
        font-weight:700;
        margin-top:5px;
        padding:0 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align:center;
    }
</style>